<template>
    <el-dialog :title="title" v-model="open" width="700px" style="max-height: 670px;height: 670px;" append-to-body>
        <el-tabs v-model="activeName">
            <el-tab-pane label="任务详情" name="first">
                <el-form ref="releaseTaskRef" :model="form" :rules="rules" label-width="85px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="任务名称" prop="title">
                            <el-input v-model="form.title" placeholder="请输入任务名称" :disabled="isDisabled" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="任务内容" prop="content">
                                <el-input v-model="form.content" type="textarea" rows="13" placeholder="请输入任务内容" :disabled="isDisabled" clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="附件" prop="files">
                                <div style="height: 130px!important;width: 900px!important;">
                                    <file-upload
                                        v-model="form.files"
                                        :multiple="true"
                                        :limit="10"
                                        :file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']"
                                        :file-size="4"
                                        :isDisabled="isDisabled">
                                    </file-upload>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="任务时间轴" name="second">
                <div class="timeline-container">
                    <el-timeline style="max-width: 600px">
                        <el-timeline-item :timestamp="activity.timeContent" placement="top" v-for="(activity, index) in activities" :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :hollow="activity.hollow">
                            <el-card>
                                <h3>{{ activity.stageName }} <el-icon style="position: relative;top: 4px;" :size="19" color="#f63f2c" v-if="index==0"><Flag /></el-icon></h3>
                                <p>操作名称：{{ activity.title }}</p>
                                <p>操作内容：{{ activity.content }}</p>
                                <p v-if="activity.stage=='61'">得分：{{ activity.score }}</p>
                                <p>上传附件：
                                    <a :href="baseUrl+fileurl" target="_blank" v-for="(fileurl, index) in activity.filesArray" :key="index" title="下载附件">
                                        <el-icon style="position: relative;top: 4px;cursor: pointer;" :size="19" color="#f63f2c"><Link /></el-icon>
                                    </a>
                                </p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-tab-pane>
        </el-tabs>
        <template #footer style="position: relative;bottom: 1px;">
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { applyFor, updateReleaseTask } from "@/api/putleader/putleader";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
    const props = defineProps({
        parentMethod: {
        type: Function,
        required: true,
        default: () => {}
        }
    })
    const { proxy } = getCurrentInstance();
    const open = ref(false);
    const title = ref("");
    const isDisabled = ref(false);
    const releaseTaskRef = ref(null);
    const activeName = ref('first')
    const activities = ref([]);
    const data = reactive({
        form: {
        id: null,
        title: null,
        content: null,
        stage: null
        },
        rules: {
            title: [
                { required: true, message: "名称不能为空", trigger: "blur" }
            ],
            content: [
                { required: true, message: "内容不能为空", trigger: "blur" }
            ]
        }
    });
    const { form, rules } = toRefs(data);
  
    const show = (data, dialogTitle, isDisabledFlag) => {
        reset();
        form.value = data!== null? data : { id: null, title: null, content: null, stage: null };//数据
        title.value = dialogTitle;//标题
        isDisabled.value = isDisabledFlag;//是否禁用
        activities.value = handleTimeData(data.childs, data.rating);//时间轴数据
        activeName.value = 'first';
        open.value = true;
    };
  
    defineExpose({
        show
    });
  
    // 处理时间轴数据
    function handleTimeData(timeData, score) {
        const timeDatas = [];
        for (let i = 0; i < timeData.length; i++) {
            const item = timeData[i];
            let tmpObj = {};
            tmpObj.type = 'primary';
            if (i==0){
                //红旗
                tmpObj.color = '#f63f2c';
            }else{
                //绿色
                tmpObj.color = '#0bbd87';
            }
            tmpObj.stage = item.stage;
            tmpObj.stageName = handleStageData(item.stage);
            tmpObj.timeContent = item.createTime+'  '+item.nikename;
            tmpObj.userName = item.nikename;
            tmpObj.title = item.title;
            tmpObj.content = item.content;
            tmpObj.score = score!=null?score:0;
            tmpObj.files = item.files;
            tmpObj.filesArray = item.files!=null?item.files.split(','):[];
            timeDatas.push(tmpObj);
        }
        return timeDatas;
    }

    // 处理stage阶段数据：0草稿，1申请中(寻榜)、20审批通过(定榜)、21审批驳回、30发榜、40揭榜、50攻榜、60完成、61评榜、62奖榜、63用榜
    function handleStageData(stage) {
        switch (stage) {
            case 0:
                return '草稿';
            case 1:
                return '寻榜';
            case 20:
                return '定榜';
            case 21:
                return '审批驳回';
            case 30:
                return '发榜';            
            case 40:
                return '揭榜';
            case 50:
                return '攻榜';
            case 60:
                return '完成';
            case 61:
                return '评榜';
            case 62:
                return '奖榜';
            case 63:
                return '用榜';
            default:
                return '';
        }
    }

    // 处理附件点击事件
    function handleAttachClick(files) {
        if (files && files.length > 0) {
            for (let i = 0; i < files.length; i++) {}
        }
    }

    // 表单重置
    function reset() {
        form.value = {
        id: null,
        title: null,
        content: null,
        stage: null
        };
        proxy.resetForm("releaseTaskRef");
    }
    
    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }
</script>
<style lang="scss" scoped>
    .timeline-container {
        height: 500px;
        overflow: auto;
    }
    .upload-file {
        position: absolute;
        top: -37px;
        height: 190px;
        overflow: auto;
    }
</style>